import React, { Component } from 'react';
import { StyleSheet, Vibration, TextInput } from 'react-native';
import { Container, Content, View, Button, Text, Toast} from 'native-base';
import { connect } from 'react-redux';

import { Header } from '../../component';
import { Colors, Metrics } from '../../theme';

class Vibrationp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      vibrationVal: '10000',
      isRepeat: false,
    }
  }

  UNSAFE_componentWillMount() {

  }

  componentDidMount() {

  }

  models1(){
    this.vibrationCancelFunc()
    this.setState({vibrationVal: [200, 200, 200, 200],isRepeat: true},()=>{
      this.vibrationFunc()
    })
  }
  models2(){
    this.vibrationCancelFunc()
    this.setState({vibrationVal: [100, 100, 100, 100],isRepeat: true},()=>{
      this.vibrationFunc()
    })
  }
  models3(){
    this.vibrationCancelFunc()
    this.setState({vibrationVal: [50, 50, 50, 50],isRepeat: true},()=>{
      this.vibrationFunc()
    })
  }

  models4(){
    this.vibrationCancelFunc()
    this.setState({vibrationVal: [100, 50, 100, 50],isRepeat: true},()=>{
      this.vibrationFunc()
    })
  }
  models5(){
    this.vibrationCancelFunc()
    this.setState({vibrationVal: [50, 100, 50, 100],isRepeat: true},()=>{
      this.vibrationFunc()
    })
  }
  models6(){
    this.vibrationCancelFunc()
    this.setState({vibrationVal: [500, 1000, 500, 1000],isRepeat: true},()=>{
      this.vibrationFunc()
    })
  }

  // 振动器
  vibrationFunc() {
    let pattern = this.state.vibrationVal;
    if (typeof this.state.vibrationVal == 'string') {
      pattern = Number(pattern);
    }
    
    let repeat = this.state.isRepeat;
    Vibration.vibrate(pattern, repeat)
  }

  // 振动器
  vibrationCancelFunc() {
    Vibration.cancel();
  }

  render() {
    return (
      <Container>
        <Header title="振动器" onLeftPress={() => this.props.navigation.goBack()} />
        <Content>
          <TextInput
            placeholder='请输入震动持续时间（ms）'
            value={this.state.vibrationVal}
            onChangeText={(value) => this.setState({ vibrationVal: value })}
          />
          <Button onPress={() => this.setState({isRepeat: !this.state.isRepeat})}>
            <Text> {'是否持续震动 ' + this.state.isRepeat}</Text>
          </Button>

          <Text> </Text>
          <Button onPress={() => this.vibrationFunc()}>
            <Text> 开始震动</Text>
          </Button>

          <Text> </Text>
          <Button onPress={() => this.vibrationCancelFunc()}>
            <Text> 结束震动</Text>
          </Button>

          <Text> </Text>
          <Button onPress={() => this.models1()}>
            <Text> 模式1</Text>
          </Button>

          <Text> </Text>
          <Button onPress={() => this.models2()}>
            <Text> 模式2 </Text>
          </Button>

          <Text> </Text>
          <Button onPress={() => this.models3()}>
            <Text> 模式3 </Text>
          </Button>

          <Text> </Text>
          <Button onPress={() => this.models4()}>
            <Text> 模式4</Text>
          </Button>

          <Text> </Text>
          <Button onPress={() => this.models5()}>
            <Text> 模式5 </Text>
          </Button>

          <Text> </Text>
          <Button onPress={() => this.models6()}>
            <Text> 模式6 </Text>
          </Button>

        </Content>
      </Container>
    );
  }

}

const mapStateToProps = state => ({

});

const mapDispatchToProps = dispatch => ({

});
export default connect(mapStateToProps, mapDispatchToProps)(Vibrationp);

const Styles = StyleSheet.create({
  qrcodeCont: {
    marginTop: 10,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    padding: 20
  }
});